<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>qweather-icons</title>

  <style>
    .icons {
      display: grid;
      max-width: 100%;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 1.25rem;
    }

    .icon {
      background-color: transparent;
      border-radius: .25rem;
      font-size: 1.5rem;
      text-align: center;
    }

    .label {
      font-family: qweather-icons;
    }

    .label {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      font-size: .625rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>

  <link rel="stylesheet" href="css/qweather-icons.css">
</head>

<body class="text-center">

  <h1>qweather-icons</h1>

  <div class="icons">
    <div class="icon">
      <i class="qi-100"></i>
      <div class="label">100</div>
    </div>
    <div class="icon">
      <i class="qi-101"></i>
      <div class="label">101</div>
    </div>
    <div class="icon">
      <i class="qi-102"></i>
      <div class="label">102</div>
    </div>
    <div class="icon">
      <i class="qi-103"></i>
      <div class="label">103</div>
    </div>
    <div class="icon">
      <i class="qi-104"></i>
      <div class="label">104</div>
    </div>
    <div class="icon">
      <i class="qi-150"></i>
      <div class="label">150</div>
    </div>
    <div class="icon">
      <i class="qi-151"></i>
      <div class="label">151</div>
    </div>
    <div class="icon">
      <i class="qi-152"></i>
      <div class="label">152</div>
    </div>
    <div class="icon">
      <i class="qi-153"></i>
      <div class="label">153</div>
    </div>
    <div class="icon">
      <i class="qi-300"></i>
      <div class="label">300</div>
    </div>
    <div class="icon">
      <i class="qi-301"></i>
      <div class="label">301</div>
    </div>
    <div class="icon">
      <i class="qi-302"></i>
      <div class="label">302</div>
    </div>
    <div class="icon">
      <i class="qi-303"></i>
      <div class="label">303</div>
    </div>
    <div class="icon">
      <i class="qi-304"></i>
      <div class="label">304</div>
    </div>
    <div class="icon">
      <i class="qi-305"></i>
      <div class="label">305</div>
    </div>
    <div class="icon">
      <i class="qi-306"></i>
      <div class="label">306</div>
    </div>
    <div class="icon">
      <i class="qi-307"></i>
      <div class="label">307</div>
    </div>
    <div class="icon">
      <i class="qi-308"></i>
      <div class="label">308</div>
    </div>
    <div class="icon">
      <i class="qi-309"></i>
      <div class="label">309</div>
    </div>
    <div class="icon">
      <i class="qi-310"></i>
      <div class="label">310</div>
    </div>
    <div class="icon">
      <i class="qi-311"></i>
      <div class="label">311</div>
    </div>
    <div class="icon">
      <i class="qi-312"></i>
      <div class="label">312</div>
    </div>
    <div class="icon">
      <i class="qi-313"></i>
      <div class="label">313</div>
    </div>
    <div class="icon">
      <i class="qi-314"></i>
      <div class="label">314</div>
    </div>
    <div class="icon">
      <i class="qi-315"></i>
      <div class="label">315</div>
    </div>
    <div class="icon">
      <i class="qi-316"></i>
      <div class="label">316</div>
    </div>
    <div class="icon">
      <i class="qi-317"></i>
      <div class="label">317</div>
    </div>
    <div class="icon">
      <i class="qi-318"></i>
      <div class="label">318</div>
    </div>
    <div class="icon">
      <i class="qi-350"></i>
      <div class="label">350</div>
    </div>
    <div class="icon">
      <i class="qi-351"></i>
      <div class="label">351</div>
    </div>
    <div class="icon">
      <i class="qi-399"></i>
      <div class="label">399</div>
    </div>
    <div class="icon">
      <i class="qi-400"></i>
      <div class="label">400</div>
    </div>
    <div class="icon">
      <i class="qi-401"></i>
      <div class="label">401</div>
    </div>
    <div class="icon">
      <i class="qi-402"></i>
      <div class="label">402</div>
    </div>
    <div class="icon">
      <i class="qi-403"></i>
      <div class="label">403</div>
    </div>
    <div class="icon">
      <i class="qi-404"></i>
      <div class="label">404</div>
    </div>
    <div class="icon">
      <i class="qi-405"></i>
      <div class="label">405</div>
    </div>
    <div class="icon">
      <i class="qi-406"></i>
      <div class="label">406</div>
    </div>
    <div class="icon">
      <i class="qi-407"></i>
      <div class="label">407</div>
    </div>
    <div class="icon">
      <i class="qi-408"></i>
      <div class="label">408</div>
    </div>
    <div class="icon">
      <i class="qi-409"></i>
      <div class="label">409</div>
    </div>
    <div class="icon">
      <i class="qi-410"></i>
      <div class="label">410</div>
    </div>
    <div class="icon">
      <i class="qi-456"></i>
      <div class="label">456</div>
    </div>
    <div class="icon">
      <i class="qi-457"></i>
      <div class="label">457</div>
    </div>
    <div class="icon">
      <i class="qi-499"></i>
      <div class="label">499</div>
    </div>
    <div class="icon">
      <i class="qi-500"></i>
      <div class="label">500</div>
    </div>
    <div class="icon">
      <i class="qi-501"></i>
      <div class="label">501</div>
    </div>
    <div class="icon">
      <i class="qi-502"></i>
      <div class="label">502</div>
    </div>
    <div class="icon">
      <i class="qi-503"></i>
      <div class="label">503</div>
    </div>
    <div class="icon">
      <i class="qi-504"></i>
      <div class="label">504</div>
    </div>
    <div class="icon">
      <i class="qi-507"></i>
      <div class="label">507</div>
    </div>
    <div class="icon">
      <i class="qi-508"></i>
      <div class="label">508</div>
    </div>
    <div class="icon">
      <i class="qi-509"></i>
      <div class="label">509</div>
    </div>
    <div class="icon">
      <i class="qi-510"></i>
      <div class="label">510</div>
    </div>
    <div class="icon">
      <i class="qi-511"></i>
      <div class="label">511</div>
    </div>
    <div class="icon">
      <i class="qi-512"></i>
      <div class="label">512</div>
    </div>
    <div class="icon">
      <i class="qi-513"></i>
      <div class="label">513</div>
    </div>
    <div class="icon">
      <i class="qi-514"></i>
      <div class="label">514</div>
    </div>
    <div class="icon">
      <i class="qi-515"></i>
      <div class="label">515</div>
    </div>
    <div class="icon">
      <i class="qi-800"></i>
      <div class="label">800</div>
    </div>
    <div class="icon">
      <i class="qi-801"></i>
      <div class="label">801</div>
    </div>
    <div class="icon">
      <i class="qi-802"></i>
      <div class="label">802</div>
    </div>
    <div class="icon">
      <i class="qi-803"></i>
      <div class="label">803</div>
    </div>
    <div class="icon">
      <i class="qi-804"></i>
      <div class="label">804</div>
    </div>
    <div class="icon">
      <i class="qi-805"></i>
      <div class="label">805</div>
    </div>
    <div class="icon">
      <i class="qi-806"></i>
      <div class="label">806</div>
    </div>
    <div class="icon">
      <i class="qi-807"></i>
      <div class="label">807</div>
    </div>
    <div class="icon">
      <i class="qi-900"></i>
      <div class="label">900</div>
    </div>
    <div class="icon">
      <i class="qi-901"></i>
      <div class="label">901</div>
    </div>
    <div class="icon">
      <i class="qi-999"></i>
      <div class="label">999</div>
    </div>
    <div class="icon">
      <i class="qi-1001"></i>
      <div class="label">1001</div>
    </div>
    <div class="icon">
      <i class="qi-1002"></i>
      <div class="label">1002</div>
    </div>
    <div class="icon">
      <i class="qi-1003"></i>
      <div class="label">1003</div>
    </div>
    <div class="icon">
      <i class="qi-1004"></i>
      <div class="label">1004</div>
    </div>
    <div class="icon">
      <i class="qi-1005"></i>
      <div class="label">1005</div>
    </div>
    <div class="icon">
      <i class="qi-1006"></i>
      <div class="label">1006</div>
    </div>
    <div class="icon">
      <i class="qi-1007"></i>
      <div class="label">1007</div>
    </div>
    <div class="icon">
      <i class="qi-1008"></i>
      <div class="label">1008</div>
    </div>
    <div class="icon">
      <i class="qi-1009"></i>
      <div class="label">1009</div>
    </div>
    <div class="icon">
      <i class="qi-1010"></i>
      <div class="label">1010</div>
    </div>
    <div class="icon">
      <i class="qi-1011"></i>
      <div class="label">1011</div>
    </div>
    <div class="icon">
      <i class="qi-1012"></i>
      <div class="label">1012</div>
    </div>
    <div class="icon">
      <i class="qi-1013"></i>
      <div class="label">1013</div>
    </div>
    <div class="icon">
      <i class="qi-1014"></i>
      <div class="label">1014</div>
    </div>
    <div class="icon">
      <i class="qi-1015"></i>
      <div class="label">1015</div>
    </div>
    <div class="icon">
      <i class="qi-1016"></i>
      <div class="label">1016</div>
    </div>
    <div class="icon">
      <i class="qi-1017"></i>
      <div class="label">1017</div>
    </div>
    <div class="icon">
      <i class="qi-1018"></i>
      <div class="label">1018</div>
    </div>
    <div class="icon">
      <i class="qi-1019"></i>
      <div class="label">1019</div>
    </div>
    <div class="icon">
      <i class="qi-1020"></i>
      <div class="label">1020</div>
    </div>
    <div class="icon">
      <i class="qi-1021"></i>
      <div class="label">1021</div>
    </div>
    <div class="icon">
      <i class="qi-1022"></i>
      <div class="label">1022</div>
    </div>
    <div class="icon">
      <i class="qi-1023"></i>
      <div class="label">1023</div>
    </div>
    <div class="icon">
      <i class="qi-1024"></i>
      <div class="label">1024</div>
    </div>
    <div class="icon">
      <i class="qi-1025"></i>
      <div class="label">1025</div>
    </div>
    <div class="icon">
      <i class="qi-1026"></i>
      <div class="label">1026</div>
    </div>
    <div class="icon">
      <i class="qi-1027"></i>
      <div class="label">1027</div>
    </div>
    <div class="icon">
      <i class="qi-1028"></i>
      <div class="label">1028</div>
    </div>
    <div class="icon">
      <i class="qi-1029"></i>
      <div class="label">1029</div>
    </div>
    <div class="icon">
      <i class="qi-1030"></i>
      <div class="label">1030</div>
    </div>
    <div class="icon">
      <i class="qi-1031"></i>
      <div class="label">1031</div>
    </div>
    <div class="icon">
      <i class="qi-1032"></i>
      <div class="label">1032</div>
    </div>
    <div class="icon">
      <i class="qi-1033"></i>
      <div class="label">1033</div>
    </div>
    <div class="icon">
      <i class="qi-1034"></i>
      <div class="label">1034</div>
    </div>
    <div class="icon">
      <i class="qi-1035"></i>
      <div class="label">1035</div>
    </div>
    <div class="icon">
      <i class="qi-1036"></i>
      <div class="label">1036</div>
    </div>
    <div class="icon">
      <i class="qi-1037"></i>
      <div class="label">1037</div>
    </div>
    <div class="icon">
      <i class="qi-1038"></i>
      <div class="label">1038</div>
    </div>
    <div class="icon">
      <i class="qi-1039"></i>
      <div class="label">1039</div>
    </div>
    <div class="icon">
      <i class="qi-1040"></i>
      <div class="label">1040</div>
    </div>
    <div class="icon">
      <i class="qi-1041"></i>
      <div class="label">1041</div>
    </div>
    <div class="icon">
      <i class="qi-1042"></i>
      <div class="label">1042</div>
    </div>
    <div class="icon">
      <i class="qi-1043"></i>
      <div class="label">1043</div>
    </div>
    <div class="icon">
      <i class="qi-1044"></i>
      <div class="label">1044</div>
    </div>
    <div class="icon">
      <i class="qi-1045"></i>
      <div class="label">1045</div>
    </div>
    <div class="icon">
      <i class="qi-1046"></i>
      <div class="label">1046</div>
    </div>
    <div class="icon">
      <i class="qi-1047"></i>
      <div class="label">1047</div>
    </div>
    <div class="icon">
      <i class="qi-1048"></i>
      <div class="label">1048</div>
    </div>
    <div class="icon">
      <i class="qi-1049"></i>
      <div class="label">1049</div>
    </div>
    <div class="icon">
      <i class="qi-1050"></i>
      <div class="label">1050</div>
    </div>
    <div class="icon">
      <i class="qi-1051"></i>
      <div class="label">1051</div>
    </div>
    <div class="icon">
      <i class="qi-1052"></i>
      <div class="label">1052</div>
    </div>
    <div class="icon">
      <i class="qi-1053"></i>
      <div class="label">1053</div>
    </div>
    <div class="icon">
      <i class="qi-1054"></i>
      <div class="label">1054</div>
    </div>
    <div class="icon">
      <i class="qi-1055"></i>
      <div class="label">1055</div>
    </div>
    <div class="icon">
      <i class="qi-1056"></i>
      <div class="label">1056</div>
    </div>
    <div class="icon">
      <i class="qi-1057"></i>
      <div class="label">1057</div>
    </div>
    <div class="icon">
      <i class="qi-1058"></i>
      <div class="label">1058</div>
    </div>
    <div class="icon">
      <i class="qi-1059"></i>
      <div class="label">1059</div>
    </div>
    <div class="icon">
      <i class="qi-1060"></i>
      <div class="label">1060</div>
    </div>
    <div class="icon">
      <i class="qi-1061"></i>
      <div class="label">1061</div>
    </div>
    <div class="icon">
      <i class="qi-1062"></i>
      <div class="label">1062</div>
    </div>
    <div class="icon">
      <i class="qi-1063"></i>
      <div class="label">1063</div>
    </div>
    <div class="icon">
      <i class="qi-1064"></i>
      <div class="label">1064</div>
    </div>
    <div class="icon">
      <i class="qi-1065"></i>
      <div class="label">1065</div>
    </div>
    <div class="icon">
      <i class="qi-1066"></i>
      <div class="label">1066</div>
    </div>
    <div class="icon">
      <i class="qi-1067"></i>
      <div class="label">1067</div>
    </div>
    <div class="icon">
      <i class="qi-1068"></i>
      <div class="label">1068</div>
    </div>
    <div class="icon">
      <i class="qi-1069"></i>
      <div class="label">1069</div>
    </div>
    <div class="icon">
      <i class="qi-1071"></i>
      <div class="label">1071</div>
    </div>
    <div class="icon">
      <i class="qi-1072"></i>
      <div class="label">1072</div>
    </div>
    <div class="icon">
      <i class="qi-1073"></i>
      <div class="label">1073</div>
    </div>
    <div class="icon">
      <i class="qi-1074"></i>
      <div class="label">1074</div>
    </div>
    <div class="icon">
      <i class="qi-1075"></i>
      <div class="label">1075</div>
    </div>
    <div class="icon">
      <i class="qi-1076"></i>
      <div class="label">1076</div>
    </div>
    <div class="icon">
      <i class="qi-1077"></i>
      <div class="label">1077</div>
    </div>
    <div class="icon">
      <i class="qi-1078"></i>
      <div class="label">1078</div>
    </div>
    <div class="icon">
      <i class="qi-1079"></i>
      <div class="label">1079</div>
    </div>
    <div class="icon">
      <i class="qi-1080"></i>
      <div class="label">1080</div>
    </div>
    <div class="icon">
      <i class="qi-1081"></i>
      <div class="label">1081</div>
    </div>
    <div class="icon">
      <i class="qi-1082"></i>
      <div class="label">1082</div>
    </div>
    <div class="icon">
      <i class="qi-1084"></i>
      <div class="label">1084</div>
    </div>
    <div class="icon">
      <i class="qi-1085"></i>
      <div class="label">1085</div>
    </div>
    <div class="icon">
      <i class="qi-1086"></i>
      <div class="label">1086</div>
    </div>
    <div class="icon">
      <i class="qi-1087"></i>
      <div class="label">1087</div>
    </div>
    <div class="icon">
      <i class="qi-1088"></i>
      <div class="label">1088</div>
    </div>
    <div class="icon">
      <i class="qi-1089"></i>
      <div class="label">1089</div>
    </div>
    <div class="icon">
      <i class="qi-1101"></i>
      <div class="label">1101</div>
    </div>
    <div class="icon">
      <i class="qi-1302"></i>
      <div class="label">1302</div>
    </div>
    <div class="icon">
      <i class="qi-1402"></i>
      <div class="label">1402</div>
    </div>
    <div class="icon">
      <i class="qi-1601"></i>
      <div class="label">1601</div>
    </div>
    <div class="icon">
      <i class="qi-1602"></i>
      <div class="label">1602</div>
    </div>
    <div class="icon">
      <i class="qi-1603"></i>
      <div class="label">1603</div>
    </div>
    <div class="icon">
      <i class="qi-1604"></i>
      <div class="label">1604</div>
    </div>
    <div class="icon">
      <i class="qi-1605"></i>
      <div class="label">1605</div>
    </div>
    <div class="icon">
      <i class="qi-1606"></i>
      <div class="label">1606</div>
    </div>
    <div class="icon">
      <i class="qi-1607"></i>
      <div class="label">1607</div>
    </div>
    <div class="icon">
      <i class="qi-1701"></i>
      <div class="label">1701</div>
    </div>
    <div class="icon">
      <i class="qi-1702"></i>
      <div class="label">1702</div>
    </div>
    <div class="icon">
      <i class="qi-1703"></i>
      <div class="label">1703</div>
    </div>
    <div class="icon">
      <i class="qi-2001"></i>
      <div class="label">2001</div>
    </div>
    <div class="icon">
      <i class="qi-2002"></i>
      <div class="label">2002</div>
    </div>
    <div class="icon">
      <i class="qi-2003"></i>
      <div class="label">2003</div>
    </div>
    <div class="icon">
      <i class="qi-2004"></i>
      <div class="label">2004</div>
    </div>
    <div class="icon">
      <i class="qi-2005"></i>
      <div class="label">2005</div>
    </div>
    <div class="icon">
      <i class="qi-2006"></i>
      <div class="label">2006</div>
    </div>
    <div class="icon">
      <i class="qi-2007"></i>
      <div class="label">2007</div>
    </div>
    <div class="icon">
      <i class="qi-2008"></i>
      <div class="label">2008</div>
    </div>
    <div class="icon">
      <i class="qi-2009"></i>
      <div class="label">2009</div>
    </div>
    <div class="icon">
      <i class="qi-2010"></i>
      <div class="label">2010</div>
    </div>
    <div class="icon">
      <i class="qi-2011"></i>
      <div class="label">2011</div>
    </div>
    <div class="icon">
      <i class="qi-2012"></i>
      <div class="label">2012</div>
    </div>
    <div class="icon">
      <i class="qi-2013"></i>
      <div class="label">2013</div>
    </div>
    <div class="icon">
      <i class="qi-2014"></i>
      <div class="label">2014</div>
    </div>
    <div class="icon">
      <i class="qi-2015"></i>
      <div class="label">2015</div>
    </div>
    <div class="icon">
      <i class="qi-2016"></i>
      <div class="label">2016</div>
    </div>
    <div class="icon">
      <i class="qi-2017"></i>
      <div class="label">2017</div>
    </div>
    <div class="icon">
      <i class="qi-2018"></i>
      <div class="label">2018</div>
    </div>
    <div class="icon">
      <i class="qi-2019"></i>
      <div class="label">2019</div>
    </div>
    <div class="icon">
      <i class="qi-2020"></i>
      <div class="label">2020</div>
    </div>
    <div class="icon">
      <i class="qi-2021"></i>
      <div class="label">2021</div>
    </div>
    <div class="icon">
      <i class="qi-2022"></i>
      <div class="label">2022</div>
    </div>
    <div class="icon">
      <i class="qi-2023"></i>
      <div class="label">2023</div>
    </div>
    <div class="icon">
      <i class="qi-2024"></i>
      <div class="label">2024</div>
    </div>
    <div class="icon">
      <i class="qi-2025"></i>
      <div class="label">2025</div>
    </div>
    <div class="icon">
      <i class="qi-2026"></i>
      <div class="label">2026</div>
    </div>
    <div class="icon">
      <i class="qi-2027"></i>
      <div class="label">2027</div>
    </div>
    <div class="icon">
      <i class="qi-2028"></i>
      <div class="label">2028</div>
    </div>
    <div class="icon">
      <i class="qi-2052"></i>
      <div class="label">2052</div>
    </div>
    <div class="icon">
      <i class="qi-2053"></i>
      <div class="label">2053</div>
    </div>
    <div class="icon">
      <i class="qi-2054"></i>
      <div class="label">2054</div>
    </div>
    <div class="icon">
      <i class="qi-9998"></i>
      <div class="label">9998</div>
    </div>
    <div class="icon">
      <i class="qi-9999"></i>
      <div class="label">9999</div>
    </div>
    <div class="icon">
      <i class="qi-100-fill"></i>
      <div class="label">100-fill</div>
    </div>
    <div class="icon">
      <i class="qi-101-fill"></i>
      <div class="label">101-fill</div>
    </div>
    <div class="icon">
      <i class="qi-102-fill"></i>
      <div class="label">102-fill</div>
    </div>
    <div class="icon">
      <i class="qi-103-fill"></i>
      <div class="label">103-fill</div>
    </div>
    <div class="icon">
      <i class="qi-104-fill"></i>
      <div class="label">104-fill</div>
    </div>
    <div class="icon">
      <i class="qi-150-fill"></i>
      <div class="label">150-fill</div>
    </div>
    <div class="icon">
      <i class="qi-151-fill"></i>
      <div class="label">151-fill</div>
    </div>
    <div class="icon">
      <i class="qi-152-fill"></i>
      <div class="label">152-fill</div>
    </div>
    <div class="icon">
      <i class="qi-153-fill"></i>
      <div class="label">153-fill</div>
    </div>
    <div class="icon">
      <i class="qi-300-fill"></i>
      <div class="label">300-fill</div>
    </div>
    <div class="icon">
      <i class="qi-301-fill"></i>
      <div class="label">301-fill</div>
    </div>
    <div class="icon">
      <i class="qi-302-fill"></i>
      <div class="label">302-fill</div>
    </div>
    <div class="icon">
      <i class="qi-303-fill"></i>
      <div class="label">303-fill</div>
    </div>
    <div class="icon">
      <i class="qi-304-fill"></i>
      <div class="label">304-fill</div>
    </div>
    <div class="icon">
      <i class="qi-305-fill"></i>
      <div class="label">305-fill</div>
    </div>
    <div class="icon">
      <i class="qi-306-fill"></i>
      <div class="label">306-fill</div>
    </div>
    <div class="icon">
      <i class="qi-307-fill"></i>
      <div class="label">307-fill</div>
    </div>
    <div class="icon">
      <i class="qi-308-fill"></i>
      <div class="label">308-fill</div>
    </div>
    <div class="icon">
      <i class="qi-309-fill"></i>
      <div class="label">309-fill</div>
    </div>
    <div class="icon">
      <i class="qi-310-fill"></i>
      <div class="label">310-fill</div>
    </div>
    <div class="icon">
      <i class="qi-311-fill"></i>
      <div class="label">311-fill</div>
    </div>
    <div class="icon">
      <i class="qi-312-fill"></i>
      <div class="label">312-fill</div>
    </div>
    <div class="icon">
      <i class="qi-313-fill"></i>
      <div class="label">313-fill</div>
    </div>
    <div class="icon">
      <i class="qi-314-fill"></i>
      <div class="label">314-fill</div>
    </div>
    <div class="icon">
      <i class="qi-315-fill"></i>
      <div class="label">315-fill</div>
    </div>
    <div class="icon">
      <i class="qi-316-fill"></i>
      <div class="label">316-fill</div>
    </div>
    <div class="icon">
      <i class="qi-317-fill"></i>
      <div class="label">317-fill</div>
    </div>
    <div class="icon">
      <i class="qi-318-fill"></i>
      <div class="label">318-fill</div>
    </div>
    <div class="icon">
      <i class="qi-350-fill"></i>
      <div class="label">350-fill</div>
    </div>
    <div class="icon">
      <i class="qi-351-fill"></i>
      <div class="label">351-fill</div>
    </div>
    <div class="icon">
      <i class="qi-399-fill"></i>
      <div class="label">399-fill</div>
    </div>
    <div class="icon">
      <i class="qi-400-fill"></i>
      <div class="label">400-fill</div>
    </div>
    <div class="icon">
      <i class="qi-401-fill"></i>
      <div class="label">401-fill</div>
    </div>
    <div class="icon">
      <i class="qi-402-fill"></i>
      <div class="label">402-fill</div>
    </div>
    <div class="icon">
      <i class="qi-403-fill"></i>
      <div class="label">403-fill</div>
    </div>
    <div class="icon">
      <i class="qi-404-fill"></i>
      <div class="label">404-fill</div>
    </div>
    <div class="icon">
      <i class="qi-405-fill"></i>
      <div class="label">405-fill</div>
    </div>
    <div class="icon">
      <i class="qi-406-fill"></i>
      <div class="label">406-fill</div>
    </div>
    <div class="icon">
      <i class="qi-407-fill"></i>
      <div class="label">407-fill</div>
    </div>
    <div class="icon">
      <i class="qi-408-fill"></i>
      <div class="label">408-fill</div>
    </div>
    <div class="icon">
      <i class="qi-409-fill"></i>
      <div class="label">409-fill</div>
    </div>
    <div class="icon">
      <i class="qi-410-fill"></i>
      <div class="label">410-fill</div>
    </div>
    <div class="icon">
      <i class="qi-456-fill"></i>
      <div class="label">456-fill</div>
    </div>
    <div class="icon">
      <i class="qi-457-fill"></i>
      <div class="label">457-fill</div>
    </div>
    <div class="icon">
      <i class="qi-499-fill"></i>
      <div class="label">499-fill</div>
    </div>
    <div class="icon">
      <i class="qi-500-fill"></i>
      <div class="label">500-fill</div>
    </div>
    <div class="icon">
      <i class="qi-501-fill"></i>
      <div class="label">501-fill</div>
    </div>
    <div class="icon">
      <i class="qi-502-fill"></i>
      <div class="label">502-fill</div>
    </div>
    <div class="icon">
      <i class="qi-503-fill"></i>
      <div class="label">503-fill</div>
    </div>
    <div class="icon">
      <i class="qi-504-fill"></i>
      <div class="label">504-fill</div>
    </div>
    <div class="icon">
      <i class="qi-507-fill"></i>
      <div class="label">507-fill</div>
    </div>
    <div class="icon">
      <i class="qi-508-fill"></i>
      <div class="label">508-fill</div>
    </div>
    <div class="icon">
      <i class="qi-509-fill"></i>
      <div class="label">509-fill</div>
    </div>
    <div class="icon">
      <i class="qi-510-fill"></i>
      <div class="label">510-fill</div>
    </div>
    <div class="icon">
      <i class="qi-511-fill"></i>
      <div class="label">511-fill</div>
    </div>
    <div class="icon">
      <i class="qi-512-fill"></i>
      <div class="label">512-fill</div>
    </div>
    <div class="icon">
      <i class="qi-513-fill"></i>
      <div class="label">513-fill</div>
    </div>
    <div class="icon">
      <i class="qi-514-fill"></i>
      <div class="label">514-fill</div>
    </div>
    <div class="icon">
      <i class="qi-515-fill"></i>
      <div class="label">515-fill</div>
    </div>
    <div class="icon">
      <i class="qi-900-fill"></i>
      <div class="label">900-fill</div>
    </div>
    <div class="icon">
      <i class="qi-901-fill"></i>
      <div class="label">901-fill</div>
    </div>
    <div class="icon">
      <i class="qi-999-fill"></i>
      <div class="label">999-fill</div>
    </div>
    <div class="icon">
      <i class="qi-qweather-fill"></i>
      <div class="label">qweather-fill</div>
    </div>
    <div class="icon">
      <i class="qi-qweather"></i>
      <div class="label">qweather</div>
    </div>
    <div class="icon">
      <i class="qi-sunny"></i>
      <div class="label">sunny</div>
    </div>
    <div class="icon">
      <i class="qi-cloudy"></i>
      <div class="label">cloudy</div>
    </div>
    <div class="icon">
      <i class="qi-few-clouds"></i>
      <div class="label">few-clouds</div>
    </div>
    <div class="icon">
      <i class="qi-partly-cloudy"></i>
      <div class="label">partly-cloudy</div>
    </div>
    <div class="icon">
      <i class="qi-overcast"></i>
      <div class="label">overcast</div>
    </div>
    <div class="icon">
      <i class="qi-clear-night"></i>
      <div class="label">clear-night</div>
    </div>
    <div class="icon">
      <i class="qi-cloudy-night"></i>
      <div class="label">cloudy-night</div>
    </div>
    <div class="icon">
      <i class="qi-few-clouds-night"></i>
      <div class="label">few-clouds-night</div>
    </div>
    <div class="icon">
      <i class="qi-partly-cloudy-night"></i>
      <div class="label">partly-cloudy-night</div>
    </div>
    <div class="icon">
      <i class="qi-shower-rain"></i>
      <div class="label">shower-rain</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-shower-rain"></i>
      <div class="label">heavy-shower-rain</div>
    </div>
    <div class="icon">
      <i class="qi-thundershower"></i>
      <div class="label">thundershower</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-thunderstorm"></i>
      <div class="label">heavy-thunderstorm</div>
    </div>
    <div class="icon">
      <i class="qi-thundershower-with-hail"></i>
      <div class="label">thundershower-with-hail</div>
    </div>
    <div class="icon">
      <i class="qi-light-rain"></i>
      <div class="label">light-rain</div>
    </div>
    <div class="icon">
      <i class="qi-moderate-rain"></i>
      <div class="label">moderate-rain</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-rain"></i>
      <div class="label">heavy-rain</div>
    </div>
    <div class="icon">
      <i class="qi-extreme-rain"></i>
      <div class="label">extreme-rain</div>
    </div>
    <div class="icon">
      <i class="qi-drizzle-rain"></i>
      <div class="label">drizzle-rain</div>
    </div>
    <div class="icon">
      <i class="qi-storm"></i>
      <div class="label">storm</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-storm"></i>
      <div class="label">heavy-storm</div>
    </div>
    <div class="icon">
      <i class="qi-severe-storm"></i>
      <div class="label">severe-storm</div>
    </div>
    <div class="icon">
      <i class="qi-freezing-rain"></i>
      <div class="label">freezing-rain</div>
    </div>
    <div class="icon">
      <i class="qi-light-to-moderate-rain"></i>
      <div class="label">light-to-moderate-rain</div>
    </div>
    <div class="icon">
      <i class="qi-moderate-to-heavy-rain"></i>
      <div class="label">moderate-to-heavy-rain</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-rain-to-storm"></i>
      <div class="label">heavy-rain-to-storm</div>
    </div>
    <div class="icon">
      <i class="qi-storm-to-heavy-storm"></i>
      <div class="label">storm-to-heavy-storm</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-to-severe-storm"></i>
      <div class="label">heavy-to-severe-storm</div>
    </div>
    <div class="icon">
      <i class="qi-shower-rain-night"></i>
      <div class="label">shower-rain-night</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-shower-rain-night"></i>
      <div class="label">heavy-shower-rain-night</div>
    </div>
    <div class="icon">
      <i class="qi-rain"></i>
      <div class="label">rain</div>
    </div>
    <div class="icon">
      <i class="qi-light-snow"></i>
      <div class="label">light-snow</div>
    </div>
    <div class="icon">
      <i class="qi-moderate-snow"></i>
      <div class="label">moderate-snow</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-snow"></i>
      <div class="label">heavy-snow</div>
    </div>
    <div class="icon">
      <i class="qi-snowstorm"></i>
      <div class="label">snowstorm</div>
    </div>
    <div class="icon">
      <i class="qi-sleet"></i>
      <div class="label">sleet</div>
    </div>
    <div class="icon">
      <i class="qi-rain-and-snow"></i>
      <div class="label">rain-and-snow</div>
    </div>
    <div class="icon">
      <i class="qi-shower-snow"></i>
      <div class="label">shower-snow</div>
    </div>
    <div class="icon">
      <i class="qi-snow-flurry"></i>
      <div class="label">snow-flurry</div>
    </div>
    <div class="icon">
      <i class="qi-light-to-moderate-snow"></i>
      <div class="label">light-to-moderate-snow</div>
    </div>
    <div class="icon">
      <i class="qi-moderate-to-heavy-snow"></i>
      <div class="label">moderate-to-heavy-snow</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-snow-to-snowstorm"></i>
      <div class="label">heavy-snow-to-snowstorm</div>
    </div>
    <div class="icon">
      <i class="qi-shower-snow-night"></i>
      <div class="label">shower-snow-night</div>
    </div>
    <div class="icon">
      <i class="qi-snow-flurry-night"></i>
      <div class="label">snow-flurry-night</div>
    </div>
    <div class="icon">
      <i class="qi-snow"></i>
      <div class="label">snow</div>
    </div>
    <div class="icon">
      <i class="qi-mist"></i>
      <div class="label">mist</div>
    </div>
    <div class="icon">
      <i class="qi-foggy"></i>
      <div class="label">foggy</div>
    </div>
    <div class="icon">
      <i class="qi-haze"></i>
      <div class="label">haze</div>
    </div>
    <div class="icon">
      <i class="qi-sand"></i>
      <div class="label">sand</div>
    </div>
    <div class="icon">
      <i class="qi-dust"></i>
      <div class="label">dust</div>
    </div>
    <div class="icon">
      <i class="qi-duststorm"></i>
      <div class="label">duststorm</div>
    </div>
    <div class="icon">
      <i class="qi-sandstorm"></i>
      <div class="label">sandstorm</div>
    </div>
    <div class="icon">
      <i class="qi-dense-fog"></i>
      <div class="label">dense-fog</div>
    </div>
    <div class="icon">
      <i class="qi-strong-fog"></i>
      <div class="label">strong-fog</div>
    </div>
    <div class="icon">
      <i class="qi-moderate-haze"></i>
      <div class="label">moderate-haze</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-haze"></i>
      <div class="label">heavy-haze</div>
    </div>
    <div class="icon">
      <i class="qi-severe-haze"></i>
      <div class="label">severe-haze</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-fog"></i>
      <div class="label">heavy-fog</div>
    </div>
    <div class="icon">
      <i class="qi-extra-heavy-fog"></i>
      <div class="label">extra-heavy-fog</div>
    </div>
    <div class="icon">
      <i class="qi-new-moon"></i>
      <div class="label">new-moon</div>
    </div>
    <div class="icon">
      <i class="qi-waxing-crescent"></i>
      <div class="label">waxing-crescent</div>
    </div>
    <div class="icon">
      <i class="qi-first-quarter"></i>
      <div class="label">first-quarter</div>
    </div>
    <div class="icon">
      <i class="qi-waxing-gibbous"></i>
      <div class="label">waxing-gibbous</div>
    </div>
    <div class="icon">
      <i class="qi-full-moon"></i>
      <div class="label">full-moon</div>
    </div>
    <div class="icon">
      <i class="qi-waning-gibbous"></i>
      <div class="label">waning-gibbous</div>
    </div>
    <div class="icon">
      <i class="qi-last-quarter"></i>
      <div class="label">last-quarter</div>
    </div>
    <div class="icon">
      <i class="qi-waning-crescent"></i>
      <div class="label">waning-crescent</div>
    </div>
    <div class="icon">
      <i class="qi-hot"></i>
      <div class="label">hot</div>
    </div>
    <div class="icon">
      <i class="qi-cold"></i>
      <div class="label">cold</div>
    </div>
    <div class="icon">
      <i class="qi-unknown"></i>
      <div class="label">unknown</div>
    </div>
    <div class="icon">
      <i class="qi-typhoon"></i>
      <div class="label">typhoon</div>
    </div>
    <div class="icon">
      <i class="qi-tornado"></i>
      <div class="label">tornado</div>
    </div>
    <div class="icon">
      <i class="qi-rainstorm"></i>
      <div class="label">rainstorm</div>
    </div>
    <div class="icon">
      <i class="qi-snow-storm"></i>
      <div class="label">snow-storm</div>
    </div>
    <div class="icon">
      <i class="qi-cold-wave"></i>
      <div class="label">cold-wave</div>
    </div>
    <div class="icon">
      <i class="qi-gale"></i>
      <div class="label">gale</div>
    </div>
    <div class="icon">
      <i class="qi-sandstorm-warning"></i>
      <div class="label">sandstorm-warning</div>
    </div>
    <div class="icon">
      <i class="qi-low-temperature-freeze"></i>
      <div class="label">low-temperature-freeze</div>
    </div>
    <div class="icon">
      <i class="qi-high-temperature"></i>
      <div class="label">high-temperature</div>
    </div>
    <div class="icon">
      <i class="qi-heat-wave"></i>
      <div class="label">heat-wave</div>
    </div>
    <div class="icon">
      <i class="qi-dry-hot-wind"></i>
      <div class="label">dry-hot-wind</div>
    </div>
    <div class="icon">
      <i class="qi-downburst"></i>
      <div class="label">downburst</div>
    </div>
    <div class="icon">
      <i class="qi-avalanche"></i>
      <div class="label">avalanche</div>
    </div>
    <div class="icon">
      <i class="qi-lightning"></i>
      <div class="label">lightning</div>
    </div>
    <div class="icon">
      <i class="qi-hail"></i>
      <div class="label">hail</div>
    </div>
    <div class="icon">
      <i class="qi-frost"></i>
      <div class="label">frost</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-fog-warning"></i>
      <div class="label">heavy-fog-warning</div>
    </div>
    <div class="icon">
      <i class="qi-low-level-wind-shearl"></i>
      <div class="label">low-level-wind-shearl</div>
    </div>
    <div class="icon">
      <i class="qi-haze-warning"></i>
      <div class="label">haze-warning</div>
    </div>
    <div class="icon">
      <i class="qi-thunder-gust"></i>
      <div class="label">thunder-gust</div>
    </div>
    <div class="icon">
      <i class="qi-road-icing"></i>
      <div class="label">road-icing</div>
    </div>
    <div class="icon">
      <i class="qi-drought"></i>
      <div class="label">drought</div>
    </div>
    <div class="icon">
      <i class="qi-gale-at-sea"></i>
      <div class="label">gale-at-sea</div>
    </div>
    <div class="icon">
      <i class="qi-heat-stroke"></i>
      <div class="label">heat-stroke</div>
    </div>
    <div class="icon">
      <i class="qi-wildfire"></i>
      <div class="label">wildfire</div>
    </div>
    <div class="icon">
      <i class="qi-grassland-fire"></i>
      <div class="label">grassland-fire</div>
    </div>
    <div class="icon">
      <i class="qi-freeze"></i>
      <div class="label">freeze</div>
    </div>
    <div class="icon">
      <i class="qi-space-weather"></i>
      <div class="label">space-weather</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-air-pollution"></i>
      <div class="label">heavy-air-pollution</div>
    </div>
    <div class="icon">
      <i class="qi-low-temperature-rain-and-snow"></i>
      <div class="label">low-temperature-rain-and-snow</div>
    </div>
    <div class="icon">
      <i class="qi-strong-convection"></i>
      <div class="label">strong-convection</div>
    </div>
    <div class="icon">
      <i class="qi-ozone"></i>
      <div class="label">ozone</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-snow-warning"></i>
      <div class="label">heavy-snow-warning</div>
    </div>
    <div class="icon">
      <i class="qi-cold-warning"></i>
      <div class="label">cold-warning</div>
    </div>
    <div class="icon">
      <i class="qi-continuous-rain"></i>
      <div class="label">continuous-rain</div>
    </div>
    <div class="icon">
      <i class="qi-waterlogging"></i>
      <div class="label">waterlogging</div>
    </div>
    <div class="icon">
      <i class="qi-geological-hazard"></i>
      <div class="label">geological-hazard</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-rainfall"></i>
      <div class="label">heavy-rainfall</div>
    </div>
    <div class="icon">
      <i class="qi-severely-falling-temperature"></i>
      <div class="label">severely-falling-temperature</div>
    </div>
    <div class="icon">
      <i class="qi-snow-disaster"></i>
      <div class="label">snow-disaster</div>
    </div>
    <div class="icon">
      <i class="qi-wildfire-grassland"></i>
      <div class="label">wildfire-grassland</div>
    </div>
    <div class="icon">
      <i class="qi-medical-meteorology"></i>
      <div class="label">medical-meteorology</div>
    </div>
    <div class="icon">
      <i class="qi-thunderstorm"></i>
      <div class="label">thunderstorm</div>
    </div>
    <div class="icon">
      <i class="qi-school-closure"></i>
      <div class="label">school-closure</div>
    </div>
    <div class="icon">
      <i class="qi-factory-closure"></i>
      <div class="label">factory-closure</div>
    </div>
    <div class="icon">
      <i class="qi-maritime-risk"></i>
      <div class="label">maritime-risk</div>
    </div>
    <div class="icon">
      <i class="qi-spring-dust"></i>
      <div class="label">spring-dust</div>
    </div>
    <div class="icon">
      <i class="qi-falling-temperature"></i>
      <div class="label">falling-temperature</div>
    </div>
    <div class="icon">
      <i class="qi-typhoon-and-rainstorm"></i>
      <div class="label">typhoon-and-rainstorm</div>
    </div>
    <div class="icon">
      <i class="qi-severe-cold"></i>
      <div class="label">severe-cold</div>
    </div>
    <div class="icon">
      <i class="qi-sand-dust"></i>
      <div class="label">sand-dust</div>
    </div>
    <div class="icon">
      <i class="qi-sea-thunderstorms"></i>
      <div class="label">sea-thunderstorms</div>
    </div>
    <div class="icon">
      <i class="qi-sea-fog"></i>
      <div class="label">sea-fog</div>
    </div>
    <div class="icon">
      <i class="qi-sea-thunder"></i>
      <div class="label">sea-thunder</div>
    </div>
    <div class="icon">
      <i class="qi-sea-typhoon"></i>
      <div class="label">sea-typhoon</div>
    </div>
    <div class="icon">
      <i class="qi-low-temperature"></i>
      <div class="label">low-temperature</div>
    </div>
    <div class="icon">
      <i class="qi-road-ice-and-snow"></i>
      <div class="label">road-ice-and-snow</div>
    </div>
    <div class="icon">
      <i class="qi-thunderstorm-and-gale"></i>
      <div class="label">thunderstorm-and-gale</div>
    </div>
    <div class="icon">
      <i class="qi-continuous-low-temperature"></i>
      <div class="label">continuous-low-temperature</div>
    </div>
    <div class="icon">
      <i class="qi-low-visibility"></i>
      <div class="label">low-visibility</div>
    </div>
    <div class="icon">
      <i class="qi-strong-dust"></i>
      <div class="label">strong-dust</div>
    </div>
    <div class="icon">
      <i class="qi-gale-in-sea-area"></i>
      <div class="label">gale-in-sea-area</div>
    </div>
    <div class="icon">
      <i class="qi-short-duration-heavy-shower-rain"></i>
      <div class="label">short-duration-heavy-shower-rain</div>
    </div>
    <div class="icon">
      <i class="qi-short-lived-heavy-shower-rain"></i>
      <div class="label">short-lived-heavy-shower-rain</div>
    </div>
    <div class="icon">
      <i class="qi-sea-area-fog"></i>
      <div class="label">sea-area-fog</div>
    </div>
    <div class="icon">
      <i class="qi-heat-stroke-conditions"></i>
      <div class="label">heat-stroke-conditions</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-pollution-weather"></i>
      <div class="label">heavy-pollution-weather</div>
    </div>
    <div class="icon">
      <i class="qi-co-poisoning-weather-conditions"></i>
      <div class="label">co-poisoning-weather-conditions</div>
    </div>
    <div class="icon">
      <i class="qi-respiratory-disease-weather-wonditions"></i>
      <div class="label">respiratory-disease-weather-wonditions</div>
    </div>
    <div class="icon">
      <i class="qi-intestinal-disease-weather-wonditions"></i>
      <div class="label">intestinal-disease-weather-wonditions</div>
    </div>
    <div class="icon">
      <i class="qi-cardiovascular-disease-weather-wonditions"></i>
      <div class="label">cardiovascular-disease-weather-wonditions</div>
    </div>
    <div class="icon">
      <i class="qi-flooding-weather-risk"></i>
      <div class="label">flooding-weather-risk</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-pollution-weather-conditions"></i>
      <div class="label">heavy-pollution-weather-conditions</div>
    </div>
    <div class="icon">
      <i class="qi-urban-flooding-weather-risk"></i>
      <div class="label">urban-flooding-weather-risk</div>
    </div>
    <div class="icon">
      <i class="qi-flooding-weather-risk-2"></i>
      <div class="label">flooding-weather-risk-2</div>
    </div>
    <div class="icon">
      <i class="qi-wildfire-weather-risk"></i>
      <div class="label">wildfire-weather-risk</div>
    </div>
    <div class="icon">
      <i class="qi-meteorological-drought"></i>
      <div class="label">meteorological-drought</div>
    </div>
    <div class="icon">
      <i class="qi-agricultural-weather-risk"></i>
      <div class="label">agricultural-weather-risk</div>
    </div>
    <div class="icon">
      <i class="qi-strong-monsoon"></i>
      <div class="label">strong-monsoon</div>
    </div>
    <div class="icon">
      <i class="qi-ice-accretion-on-wire"></i>
      <div class="label">ice-accretion-on-wire</div>
    </div>
    <div class="icon">
      <i class="qi-stroke-weather-risk"></i>
      <div class="label">stroke-weather-risk</div>
    </div>
    <div class="icon">
      <i class="qi-wildfire-grassland-risk"></i>
      <div class="label">wildfire-grassland-risk</div>
    </div>
    <div class="icon">
      <i class="qi-thunderstorm-and-strong-winds"></i>
      <div class="label">thunderstorm-and-strong-winds</div>
    </div>
    <div class="icon">
      <i class="qi-low-temperature-damage"></i>
      <div class="label">low-temperature-damage</div>
    </div>
    <div class="icon">
      <i class="qi-national-agricultural-meteorological-risk"></i>
      <div class="label">national-agricultural-meteorological-risk</div>
    </div>
    <div class="icon">
      <i class="qi-dry-hot-wind-risk-for-winter-wheat"></i>
      <div class="label">dry-hot-wind-risk-for-winter-wheat</div>
    </div>
    <div class="icon">
      <i class="qi-flood"></i>
      <div class="label">flood</div>
    </div>
    <div class="icon">
      <i class="qi-mudflow"></i>
      <div class="label">mudflow</div>
    </div>
    <div class="icon">
      <i class="qi-storm-surge"></i>
      <div class="label">storm-surge</div>
    </div>
    <div class="icon">
      <i class="qi-very-hot-weather"></i>
      <div class="label">very-hot-weather</div>
    </div>
    <div class="icon">
      <i class="qi-strong-monsoon-signal"></i>
      <div class="label">strong-monsoon-signal</div>
    </div>
    <div class="icon">
      <i class="qi-landslip"></i>
      <div class="label">landslip</div>
    </div>
    <div class="icon">
      <i class="qi-tropical-cyclone"></i>
      <div class="label">tropical-cyclone</div>
    </div>
    <div class="icon">
      <i class="qi-fire-danger"></i>
      <div class="label">fire-danger</div>
    </div>
    <div class="icon">
      <i class="qi-flooding-in-the-northern-new-territories"></i>
      <div class="label">flooding-in-the-northern-new-territories</div>
    </div>
    <div class="icon">
      <i class="qi-cold-weather"></i>
      <div class="label">cold-weather</div>
    </div>
    <div class="icon">
      <i class="qi-cold-surge-advisory"></i>
      <div class="label">cold-surge-advisory</div>
    </div>
    <div class="icon">
      <i class="qi-strong-wind-advisory"></i>
      <div class="label">strong-wind-advisory</div>
    </div>
    <div class="icon">
      <i class="qi-rainfall-advisory"></i>
      <div class="label">rainfall-advisory</div>
    </div>
    <div class="icon">
      <i class="qi-wind-warning"></i>
      <div class="label">wind-warning</div>
    </div>
    <div class="icon">
      <i class="qi-snow-ice"></i>
      <div class="label">snow-ice</div>
    </div>
    <div class="icon">
      <i class="qi-fog"></i>
      <div class="label">fog</div>
    </div>
    <div class="icon">
      <i class="qi-coastal-event"></i>
      <div class="label">coastal-event</div>
    </div>
    <div class="icon">
      <i class="qi-forest-fire"></i>
      <div class="label">forest-fire</div>
    </div>
    <div class="icon">
      <i class="qi-rain-warning"></i>
      <div class="label">rain-warning</div>
    </div>
    <div class="icon">
      <i class="qi-rain-flood"></i>
      <div class="label">rain-flood</div>
    </div>
    <div class="icon">
      <i class="qi-freezing-rain-icing"></i>
      <div class="label">freezing-rain-icing</div>
    </div>
    <div class="icon">
      <i class="qi-ground-frost"></i>
      <div class="label">ground-frost</div>
    </div>
    <div class="icon">
      <i class="qi-dust-raising-winds"></i>
      <div class="label">dust-raising-winds</div>
    </div>
    <div class="icon">
      <i class="qi-strong-surface-winds"></i>
      <div class="label">strong-surface-winds</div>
    </div>
    <div class="icon">
      <i class="qi-hot-day"></i>
      <div class="label">hot-day</div>
    </div>
    <div class="icon">
      <i class="qi-warm-night"></i>
      <div class="label">warm-night</div>
    </div>
    <div class="icon">
      <i class="qi-cold-day"></i>
      <div class="label">cold-day</div>
    </div>
    <div class="icon">
      <i class="qi-thunderstorm-and-lightning"></i>
      <div class="label">thunderstorm-and-lightning</div>
    </div>
    <div class="icon">
      <i class="qi-hailstorm"></i>
      <div class="label">hailstorm</div>
    </div>
    <div class="icon">
      <i class="qi-sea-area-warning"></i>
      <div class="label">sea-area-warning</div>
    </div>
    <div class="icon">
      <i class="qi-fishermen-warning"></i>
      <div class="label">fishermen-warning</div>
    </div>
    <div class="icon">
      <i class="qi-low-humidity"></i>
      <div class="label">low-humidity</div>
    </div>
    <div class="icon">
      <i class="qi-accumulated-rain"></i>
      <div class="label">accumulated-rain</div>
    </div>
    <div class="icon">
      <i class="qi-hazardous-surf-warning"></i>
      <div class="label">hazardous-surf-warning</div>
    </div>
    <div class="icon">
      <i class="qi-marine-wind-warning"></i>
      <div class="label">marine-wind-warning</div>
    </div>
    <div class="icon">
      <i class="qi-road-weather-alert"></i>
      <div class="label">road-weather-alert</div>
    </div>
    <div class="icon">
      <i class="qi-thunder-rain"></i>
      <div class="label">thunder-rain</div>
    </div>
    <div class="icon">
      <i class="qi-thunder-rain-and-fog"></i>
      <div class="label">thunder-rain-and-fog</div>
    </div>
    <div class="icon">
      <i class="qi-damaging-winds"></i>
      <div class="label">damaging-winds</div>
    </div>
    <div class="icon">
      <i class="qi-veld-fire-conditions"></i>
      <div class="label">veld-fire-conditions</div>
    </div>
    <div class="icon">
      <i class="qi-weather-advisory"></i>
      <div class="label">weather-advisory</div>
    </div>
    <div class="icon">
      <i class="qi-snow-warning"></i>
      <div class="label">snow-warning</div>
    </div>
    <div class="icon">
      <i class="qi-zonda-wind"></i>
      <div class="label">zonda-wind</div>
    </div>
    <div class="icon">
      <i class="qi-severe-weather-warning"></i>
      <div class="label">severe-weather-warning</div>
    </div>
    <div class="icon">
      <i class="qi-warning-default"></i>
      <div class="label">warning-default</div>
    </div>
    <div class="icon">
      <i class="qi-sunny-fill"></i>
      <div class="label">sunny-fill</div>
    </div>
    <div class="icon">
      <i class="qi-cloudy-fill"></i>
      <div class="label">cloudy-fill</div>
    </div>
    <div class="icon">
      <i class="qi-few-clouds-fill"></i>
      <div class="label">few-clouds-fill</div>
    </div>
    <div class="icon">
      <i class="qi-partly-cloudy-fill"></i>
      <div class="label">partly-cloudy-fill</div>
    </div>
    <div class="icon">
      <i class="qi-overcast-fill"></i>
      <div class="label">overcast-fill</div>
    </div>
    <div class="icon">
      <i class="qi-clear-night-fill"></i>
      <div class="label">clear-night-fill</div>
    </div>
    <div class="icon">
      <i class="qi-cloudy-night-fill"></i>
      <div class="label">cloudy-night-fill</div>
    </div>
    <div class="icon">
      <i class="qi-few-clouds-night-fill"></i>
      <div class="label">few-clouds-night-fill</div>
    </div>
    <div class="icon">
      <i class="qi-partly-cloudy-night-fill"></i>
      <div class="label">partly-cloudy-night-fill</div>
    </div>
    <div class="icon">
      <i class="qi-shower-rain-fill"></i>
      <div class="label">shower-rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-shower-rain-fill"></i>
      <div class="label">heavy-shower-rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-thundershower-fill"></i>
      <div class="label">thundershower-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-thunderstorm-fill"></i>
      <div class="label">heavy-thunderstorm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-thundershower-with-hail-fill"></i>
      <div class="label">thundershower-with-hail-fill</div>
    </div>
    <div class="icon">
      <i class="qi-light-rain-fill"></i>
      <div class="label">light-rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-moderate-rain-fill"></i>
      <div class="label">moderate-rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-rain-fill"></i>
      <div class="label">heavy-rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-extreme-rain-fill"></i>
      <div class="label">extreme-rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-drizzle-rain-fill"></i>
      <div class="label">drizzle-rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-storm-fill"></i>
      <div class="label">storm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-storm-fill"></i>
      <div class="label">heavy-storm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-severe-storm-fill"></i>
      <div class="label">severe-storm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-freezing-rain-fill"></i>
      <div class="label">freezing-rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-light-to-moderate-rain-fill"></i>
      <div class="label">light-to-moderate-rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-moderate-to-heavy-rain-fill"></i>
      <div class="label">moderate-to-heavy-rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-rain-to-storm-fill"></i>
      <div class="label">heavy-rain-to-storm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-storm-to-heavy-storm-fill"></i>
      <div class="label">storm-to-heavy-storm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-to-severe-storm-fill"></i>
      <div class="label">heavy-to-severe-storm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-shower-rain-night-fill"></i>
      <div class="label">shower-rain-night-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-shower-rain-night-fill"></i>
      <div class="label">heavy-shower-rain-night-fill</div>
    </div>
    <div class="icon">
      <i class="qi-rain-fill"></i>
      <div class="label">rain-fill</div>
    </div>
    <div class="icon">
      <i class="qi-light-snow-fill"></i>
      <div class="label">light-snow-fill</div>
    </div>
    <div class="icon">
      <i class="qi-moderate-snow-fill"></i>
      <div class="label">moderate-snow-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-snow-fill"></i>
      <div class="label">heavy-snow-fill</div>
    </div>
    <div class="icon">
      <i class="qi-snowstorm-fill"></i>
      <div class="label">snowstorm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-sleet-fill"></i>
      <div class="label">sleet-fill</div>
    </div>
    <div class="icon">
      <i class="qi-rain-and-snow-fill"></i>
      <div class="label">rain-and-snow-fill</div>
    </div>
    <div class="icon">
      <i class="qi-shower-snow-fill"></i>
      <div class="label">shower-snow-fill</div>
    </div>
    <div class="icon">
      <i class="qi-snow-flurry-fill"></i>
      <div class="label">snow-flurry-fill</div>
    </div>
    <div class="icon">
      <i class="qi-light-to-moderate-snow-fill"></i>
      <div class="label">light-to-moderate-snow-fill</div>
    </div>
    <div class="icon">
      <i class="qi-moderate-to-heavy-snow-fill"></i>
      <div class="label">moderate-to-heavy-snow-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-snow-to-snowstorm-fill"></i>
      <div class="label">heavy-snow-to-snowstorm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-shower-snow-night-fill"></i>
      <div class="label">shower-snow-night-fill</div>
    </div>
    <div class="icon">
      <i class="qi-snow-flurry-night-fill"></i>
      <div class="label">snow-flurry-night-fill</div>
    </div>
    <div class="icon">
      <i class="qi-snow-fill"></i>
      <div class="label">snow-fill</div>
    </div>
    <div class="icon">
      <i class="qi-mist-fill"></i>
      <div class="label">mist-fill</div>
    </div>
    <div class="icon">
      <i class="qi-foggy-fill"></i>
      <div class="label">foggy-fill</div>
    </div>
    <div class="icon">
      <i class="qi-haze-fill"></i>
      <div class="label">haze-fill</div>
    </div>
    <div class="icon">
      <i class="qi-sand-fill"></i>
      <div class="label">sand-fill</div>
    </div>
    <div class="icon">
      <i class="qi-dust-fill"></i>
      <div class="label">dust-fill</div>
    </div>
    <div class="icon">
      <i class="qi-duststorm-fill"></i>
      <div class="label">duststorm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-sandstorm-fill"></i>
      <div class="label">sandstorm-fill</div>
    </div>
    <div class="icon">
      <i class="qi-dense-fog-fill"></i>
      <div class="label">dense-fog-fill</div>
    </div>
    <div class="icon">
      <i class="qi-strong-fog-fill"></i>
      <div class="label">strong-fog-fill</div>
    </div>
    <div class="icon">
      <i class="qi-moderate-haze-fill"></i>
      <div class="label">moderate-haze-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-haze-fill"></i>
      <div class="label">heavy-haze-fill</div>
    </div>
    <div class="icon">
      <i class="qi-severe-haze-fill"></i>
      <div class="label">severe-haze-fill</div>
    </div>
    <div class="icon">
      <i class="qi-heavy-fog-fill"></i>
      <div class="label">heavy-fog-fill</div>
    </div>
    <div class="icon">
      <i class="qi-extra-heavy-fog-fill"></i>
      <div class="label">extra-heavy-fog-fill</div>
    </div>
    <div class="icon">
      <i class="qi-hot-fill"></i>
      <div class="label">hot-fill</div>
    </div>
    <div class="icon">
      <i class="qi-cold-fill"></i>
      <div class="label">cold-fill</div>
    </div>
    <div class="icon">
      <i class="qi-unknown-fill"></i>
      <div class="label">unknown-fill</div>
    </div>
  </div>

  <hr />
  <div class='icons'>
    <div class='icon'>
      <i class='qi-ico-fp'></i>
      <div class='label'>ico-fp<br>e300</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-temp'></i>
      <div class='label'>ico-temp<br>e301</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-carno'></i>
      <div class='label'>ico-carno<br>e302</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wificast'></i>
      <div class='label'>ico-wificast<br>e303</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-logo-uwb'></i>
      <div class='label'>ico-logo-uwb<br>e304</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-logo-carkey'></i>
      <div class='label'>ico-logo-carkey<br>e305</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-nfc-simple'></i>
      <div class='label'>ico-nfc-simple<br>e306</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-nfc-wlc'></i>
      <div class='label'>ico-nfc-wlc<br>e307</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-nfc-direct'></i>
      <div class='label'>ico-nfc-direct<br>e308</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-logo-nfc'></i>
      <div class='label'>ico-logo-nfc<br>e309</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-finger'></i>
      <div class='label'>ico-finger<br>e310</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifi0'></i>
      <div class='label'>ico-wifi0<br>e311</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifi1'></i>
      <div class='label'>ico-wifi1<br>e312</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifi2'></i>
      <div class='label'>ico-wifi2<br>e313</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifi3'></i>
      <div class='label'>ico-wifi3<br>e314</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifi4-no'></i>
      <div class='label'>ico-wifi4-no<br>e315</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifi5-limited'></i>
      <div class='label'>ico-wifi5-limited<br>e316</div>
    </div>

    <div class='icon'>
      <i class='qi-ico-centigrade'></i>
      <div class='label'>ico-centigrade<br>e323</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-percent'></i>
      <div class='label'>ico-percent<br>e324</div>
    </div>


    <div class='icon'>
      <i class='qi-ico-car'></i>
      <div class='label'>ico-car<br>e325</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-setting'></i>
      <div class='label'>ico-setting<br>e326</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-setting-solid'></i>
      <div class='label'>ico-setting-solid<br>e327</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat0'></i>
      <div class='label'>ico-bat0<br>e328</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat1'></i>
      <div class='label'>ico-bat1<br>e329</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat2'></i>
      <div class='label'>ico-bat2<br>e32a</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat3'></i>
      <div class='label'>ico-bat3<br>e32b</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat4'></i>
      <div class='label'>ico-bat4<br>e32c</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat5'></i>
      <div class='label'>ico-bat5<br>e32d</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat6'></i>
      <div class='label'>ico-bat6<br>e32e</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat7'></i>
      <div class='label'>ico-bat7<br>e32f</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat8'></i>
      <div class='label'>ico-bat8<br>e330</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat9'></i>
      <div class='label'>ico-bat9<br>e331</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat10'></i>
      <div class='label'>ico-bat10<br>e332</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat12-no'></i>
      <div class='label'>ico-bat12-no<br>e340</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bat12-wlc'></i>
      <div class='label'>ico-bat12-wlc<br>e341</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc0'></i>
      <div class='label'>ico-batc0<br>e352</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc1'></i>
      <div class='label'>ico-batc1<br>e353</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc2'></i>
      <div class='label'>ico-batc2<br>e354</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc3'></i>
      <div class='label'>ico-batc3<br>e355</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc4'></i>
      <div class='label'>ico-batc4<br>e356</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc5'></i>
      <div class='label'>ico-batc5<br>e357</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc6'></i>
      <div class='label'>ico-batc6<br>e358</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc7'></i>
      <div class='label'>ico-batc7<br>e359</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc8'></i>
      <div class='label'>ico-batc8<br>e35a</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc9'></i>
      <div class='label'>ico-batc9<br>e35b</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-batc10'></i>
      <div class='label'>ico-batc10<br>e35c</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate0'></i>
      <div class='label'>ico-bate0<br>e363</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate1'></i>
      <div class='label'>ico-bate1<br>e364</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate2'></i>
      <div class='label'>ico-bate2<br>e365</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate3'></i>
      <div class='label'>ico-bate3<br>e366</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate4'></i>
      <div class='label'>ico-bate4<br>e367</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate5'></i>
      <div class='label'>ico-bate5<br>e368</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate6'></i>
      <div class='label'>ico-bate6<br>e369</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate7'></i>
      <div class='label'>ico-bate7<br>e36a</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate8'></i>
      <div class='label'>ico-bate8<br>e36b</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate9'></i>
      <div class='label'>ico-bate9<br>e36c</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate10'></i>
      <div class='label'>ico-bate10<br>e36d</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate11-charge'></i>
      <div class='label'>ico-bate11-charge<br>e36e</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bate12-no'></i>
      <div class='label'>ico-bate12-no<br>e36f</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-location'></i>
      <div class='label'>ico-location<br>e377</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-humility'></i>
      <div class='label'>ico-humility<br>e378</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-humility-solid'></i>
      <div class='label'>ico-humility-solid<br>e379</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-home'></i>
      <div class='label'>ico-home<br>e380</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-home-solid'></i>
      <div class='label'>ico-home-solid<br>e381</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-calendar'></i>
      <div class='label'>ico-calendar<br>e382</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-usb'></i>
      <div class='label'>ico-usb<br>e383</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-reload'></i>
      <div class='label'>ico-reload<br>e384</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-refresh'></i>
      <div class='label'>ico-refresh<br>f165</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-more'></i>
      <div class='label'>ico-more<br>e385</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-save'></i>
      <div class='label'>ico-save<br>e391</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-download'></i>
      <div class='label'>ico-download<br>e392</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-saveas'></i>
      <div class='label'>ico-saveas<br>e393</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-link'></i>
      <div class='label'>ico-link<br>e394</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-trash'></i>
      <div class='label'>ico-trash<br>e395</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-exclamationtrianglefill'></i>
      <div class='label'>ico-exclamationtrianglefill<br>e396</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-checkcirclefill'></i>
      <div class='label'>ico-checkcirclefill<br>e397</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-crosscirclefill'></i>
      <div class='label'>ico-crosscirclefill<br>e398</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-pluscirclefill'></i>
      <div class='label'>ico-pluscirclefill<br>e399</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-dashcirclefill'></i>
      <div class='label'>ico-dashcirclefill<br>e39a</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-questioncirclefill'></i>
      <div class='label'>ico-questioncirclefill<br>e39b</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-infocirclefill'></i>
      <div class='label'>ico-infocirclefill<br>e39c</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-exclamationcirclefill'></i>
      <div class='label'>ico-exclamationcirclefill<br>e39d</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-clockfill'></i>
      <div class='label'>ico-clockfill<br>e39e</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-clock'></i>
      <div class='label'>ico-clock<br>e39f</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bluetooth'></i>
      <div class='label'>ico-bluetooth<br>e3a0</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-hotspot'></i>
      <div class='label'>ico-hotspot<br>e3a1</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-windows'></i>
      <div class='label'>ico-windows<br>e3a2</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-alipay'></i>
      <div class='label'>ico-alipay<br>e3a3</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wechat'></i>
      <div class='label'>ico-wechat<br>e3a4</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-tencentqq'></i>
      <div class='label'>ico-tencentqq<br>e3a5</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-usbc'></i>
      <div class='label'>ico-usbc<br>e3a6</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-usbdrive'></i>
      <div class='label'>ico-usbdrive<br>e3a7</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-usbsymbol'></i>
      <div class='label'>ico-usbsymbol<br>e3a8</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-qrcodescan'></i>
      <div class='label'>ico-qrcodescan<br>e3a9</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-qrcode'></i>
      <div class='label'>ico-qrcode<br>e3aa</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-checkcirclefill2'></i>
      <div class='label'>ico-checkcirclefill2<br>e3ab</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-crosscirclefill2'></i>
      <div class='label'>ico-crosscirclefill2<br>e3ac</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-earbuds'></i>
      <div class='label'>ico-earbuds<br>e3ad</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-headphones'></i>
      <div class='label'>ico-headphones<br>e3ae</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-headset'></i>
      <div class='label'>ico-headset<br>e3af</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-geoaltfill'></i>
      <div class='label'>ico-geoaltfill<br>e3b0</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-geoalt'></i>
      <div class='label'>ico-geoalt<br>e3b1</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-geofill'></i>
      <div class='label'>ico-geofill<br>e3b2</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-geo'></i>
      <div class='label'>ico-geo<br>e3b3</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-pinmapfill'></i>
      <div class='label'>ico-pinmapfill<br>e3b4</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-pinmap'></i>
      <div class='label'>ico-pinmap<br>e3b5</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-giftfill'></i>
      <div class='label'>ico-giftfill<br>e3b6</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-gift'></i>
      <div class='label'>ico-gift<br>e3b7</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-globe'></i>
      <div class='label'>ico-globe<br>e3b8</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-globe2'></i>
      <div class='label'>ico-globe2<br>e3b9</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-keyfill'></i>
      <div class='label'>ico-keyfill<br>e3ba</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-key'></i>
      <div class='label'>ico-key<br>e3bb</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-arrowrepeat2'></i>
      <div class='label'>ico-arrowrepeat2<br>e3bc</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-rightwardsarrow'></i>
      <div class='label'>ico-rightwardsarrow<br>e3bd</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifiscanbars'></i>
      <div class='label'>ico-wifiscanbars<br>e3bf</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifiscan0'></i>
      <div class='label'>ico-wifiscan0<br>e3c0</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifiscan1'></i>
      <div class='label'>ico-wifiscan1<br>e3c1</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifiscan2'></i>
      <div class='label'>ico-wifiscan2<br>e3c2</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-wifiscan3'></i>
      <div class='label'>ico-wifiscan3<br>e3c3</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-questioncircle'></i>
      <div class='label'>ico-questioncircle<br>e3c4</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-infocircle'></i>
      <div class='label'>ico-infocircle<br>e3c5</div>
    </div>

    <div class='icon'>
      <i class='qi-ico-smartwatch'></i>
      <div class='label'>ico-smartwatch<br>e3c6</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-table'></i>
      <div class='label'>ico-table<br>e3c7</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-calendarmonth'></i>
      <div class='label'>ico-calendarmonth<br>e3c8</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-calendarday'></i>
      <div class='label'>ico-calendarday<br>e3c9</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-yinyang'></i>
      <div class='label'>ico-yinyang<br>e3ca</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-power'></i>
      <div class='label'>ico-power<br>e3cb</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-restart'></i>
      <div class='label'>ico-restart<br>e3cc</div>
    </div>

    <div class='icon'>
      <i class='qi-ico-sunrise'></i>
      <div class='label'>ico-sunrise<br>e3d0</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-sunrise-fill'></i>
      <div class='label'>ico-sunrise-fill<br>e3d1</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-sunset'></i>
      <div class='label'>ico-sunset<br>e3d2</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-sunset-fill'></i>
      <div class='label'>ico-sunset-fill<br>e3d3</div>
    </div>

    <div class='icon'>
      <i class='qi-ico-aqi1'></i>
      <div class='label'>ico-aqi1<br>e3d4</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-aqi2'></i>
      <div class='label'>ico-aqi2<br>e3d5</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-aqi3'></i>
      <div class='label'>ico-aqi3<br>e3d6</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-aqi4'></i>
      <div class='label'>ico-aqi4<br>e3d7</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-aqi5'></i>
      <div class='label'>ico-aqi5<br>e3d8</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-aqi6'></i>
      <div class='label'>ico-aqi6<br>e3d9</div>
    </div>

    <div class='icon'>
      <i class='qi-ico-award'></i>
      <div class='label'>ico-award<br>e3e0</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bell'></i>
      <div class='label'>ico-bell<br>e3e1</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bookmarkheart'></i>
      <div class='label'>ico-bookmarkheart<br>e3e2</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-bookmarkstar'></i>
      <div class='label'>ico-bookmarkstar<br>e3e3</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-birthdaycake'></i>
      <div class='label'>ico-birthdaycake<br>e3e4</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-alarm'></i>
      <div class='label'>ico-alarm<br>e3e5</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-book'></i>
      <div class='label'>ico-book<br>e3e6</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-capsule'></i>
      <div class='label'>ico-capsule<br>e3e7</div>
    </div>
    <div class='icon'>
      <i class='qi-ico-chatdots'></i>
      <div class='label'>ico-chatdots<br>e3e8</div>
    </div>
 <div class='icon'>
  <i class='qi-ico-na'></i>
  <div class='label'>ico-na<br>e3e9</div>
 </div>
 <div class='icon'>
  <i class='qi-ico-house'></i>
  <div class='label'>ico-house<br>e3ea</div>
 </div>
 <div class='icon'>
  <i class='qi-ico-house-humidity'></i>
  <div class='label'>ico-house_humidity<br>e3eb</div>
 </div>
 <div class='icon'>
  <i class='qi-ico-house-raindrops'></i>
  <div class='label'>ico-house_raindrops<br>e3ec</div>
 </div>
 <div class='icon'>
  <i class='qi-ico-house-thermometer'></i>
  <div class='label'>ico-house_thermometer<br>e3ed</div>
 </div>
 <div class='icon'>
  <i class='qi-ico-celsius'></i>
  <div class='label'>ico-celsius<br>e3f0</div>
 </div>
 <div class='icon'>
  <i class='qi-ico-fahrenheit'></i>
  <div class='label'>ico-fahrenheit<br>e3f1</div>
 </div>
 <div class='icon'>
  <i class='qi-ico-degree'></i>
  <div class='label'>ico-degree<br>e3f2</div>
 </div>
 <div class='icon'>
  <i class='qi-ico-umbrella'></i>
  <div class='label'>ico-umbrella<br>e3f3</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-shu-fill'></i>
  <div class='label'>zodiac-shu-fill<br>e501</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-niu-fill'></i>
  <div class='label'>zodiac-niu-fill<br>e502</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-hu-fill'></i>
  <div class='label'>zodiac-hu-fill<br>e503</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-tu-fill'></i>
  <div class='label'>zodiac-tu-fill<br>e504</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-long-fill'></i>
  <div class='label'>zodiac-long-fill<br>e505</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-she-fill'></i>
  <div class='label'>zodiac-she-fill<br>e506</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-ma-fill'></i>
  <div class='label'>zodiac-ma-fill<br>e507</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-yang-fill'></i>
  <div class='label'>zodiac-yang-fill<br>e508</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-hou-fill'></i>
  <div class='label'>zodiac-hou-fill<br>e509</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-ji-fill'></i>
  <div class='label'>zodiac-ji-fill<br>e50a</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-gou-fill'></i>
  <div class='label'>zodiac-gou-fill<br>e50b</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-zhu-fill'></i>
  <div class='label'>zodiac-zhu-fill<br>e50c</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-shu'></i>
  <div class='label'>zodiac-shu<br>e511</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-niu'></i>
  <div class='label'>zodiac-niu<br>e512</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-hu'></i>
  <div class='label'>zodiac-hu<br>e513</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-tu'></i>
  <div class='label'>zodiac-tu<br>e514</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-long'></i>
  <div class='label'>zodiac-long<br>e515</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-she'></i>
  <div class='label'>zodiac-she<br>e516</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-ma'></i>
  <div class='label'>zodiac-ma<br>e517</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-yang'></i>
  <div class='label'>zodiac-yang<br>e518</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-hou'></i>
  <div class='label'>zodiac-hou<br>e519</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-ji'></i>
  <div class='label'>zodiac-ji<br>e51a</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-gou'></i>
  <div class='label'>zodiac-gou<br>e51b</div>
 </div>
 <div class='icon'>
  <i class='qi-zodiac-zhu'></i>
  <div class='label'>zodiac-zhu<br>e51c</div>
 </div>
</div>
    
  </div>

</body>

</html>